import React, { useState, useCallback } from 'react';
import SubData from './useMemoSubData';

// export default function () {
//   console.log('app渲染了');
//   const [count, setCount] = useState(1);
//   const AddHandel = useCallback(() => {
//     console.log('闭包引用的count', count);
//     setCount((count) => {
//       console.log(count);
//       return count + 1;
//     });
//   }, []);
//   return (
//     <div>
//       <h4>{count}</h4>
//       <button onClick={AddHandel}>+1</button>
//       <button>+0:不会渲染</button>
//       <SubData></SubData>{' '}
//       {/* 初期学习的时候说过:父组件更新,子组件会跟着更新,很多时候是没有必要跟着更新的,
//       那怎么办,使用React.memo 让子组件函数进去再出来,得到的SubData组件就能得到优化 */}
//     </div>
//   );
// }

export default function App() {
  const [count, setCount] = useState(0);
  console.log('更新了');
  const AddHandel = useCallback(() => {
    setCount((count) => {
      return count + 1;
    });
  }, []);
  return (
    //任务1:测试缓存函数
    <div>
      <h1>{count}</h1>
      <button onClick={AddHandel}>+1(这是优化过的按钮,函数已经缓存)</button>
      <br />
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        +1(useState本身就有优化)
      </button>
      <br />
      <hr />
      <hr />
      <SubData></SubData>
    </div>
  );
}
